<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
      <MeQueryItem label="销售单号" :label-width="60">
        <n-input v-model:value="queryItems.orderNum" type="text" placeholder="请输入销售单号" clearable />
      </MeQueryItem>
      <MeQueryItem label="订单号" :label-width="60">
        <n-input v-model:value="queryItems.deliveryOrderNum" type="text" placeholder="请输入用户名" clearable />
      </MeQueryItem>
      <MeQueryItem label="配送方式" :label-width="60">
        <n-select
          v-model:value="queryItems.deliveryType" clearable :options="[
            { label: '自取', value: 1 },
            { label: '配送', value: 2 },
          ]"
        />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
  <!-- 打印 -->
  <n-drawer v-model:show="printOrderModel" :width="402">
    <n-drawer-content>
      <template #header>
        Header
      </template>
      <OrderPrinter :order-id="orderPrinterId" @print-start="onPrintStart" @print-end="onPrintEnd" />
      <template #footer>
        <NButton @click="printOrderModelFunction">
          Footer
        </NButton>
      </template>
    </n-drawer-content>
  </n-drawer>
  <!-- 接单 -->
  <n-modal v-model:show="confirmOrderModel">
    <n-card style="width: 600px" title="接单确认" :bordered="false" size="huge" role="dialog">
      内容
      <template #footer>
        <NButton @click="confirmOrderModelFunction">
          确认
        </NButton>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import { MeCrud, MeQueryItem } from '@/components'
import OrderPrinter from '@/components/OrderPrinter/index.vue'
import { NButton } from 'naive-ui'
import api from './api'

defineOptions({ name: 'GoodsMgt' })
const route = useRoute()
const router = useRouter()
const $table = ref(null)
const currentRow = ref({})
/** QueryBar筛选参数（可选） */
const queryItems = ref({ saleOrderId: route.query.saleOrderId })
const printOrderModel = ref(false)
const columns = [
  { title: '销售单号', key: 'orderPO.orderNum', width: 150, ellipsis: { tooltip: true } },
  {
    title: '接单人',
    key: 'orderPO.confirmUserName',
    width: 100,
    // ellipsis: { tooltip: false },
  },
  { title: '顾客姓名', key: 'orderPO.userName', width: 100, ellipsis: { tooltip: true } },
  {
    title: '顾客手机号',
    key: 'userPhone',
    width: 80,
    // ellipsis: { tooltip: true },
  },
  {
    title: '配送地址',
    key: 'deliveryAddress',
    width: 150,
  },
  {
    title: '状态',
    key: 'deliveryStatusName',
    width: 100,
  },
  {
    title: '跑腿类型',
    key: 'errandTypeName',
    width: 100,
    render(row) {
      if (row.errandTypeName) {
        return row.errandTypeName
      }
      else {
        return '~'
      }
    },
  },
  {
    title: '跑腿状态',
    key: 'errandTypeName',
    width: 100,
  },
  {
    title: '操作',
    key: 'actions',
    width: 300,
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      const array = []
      // 打印
      if (true) {
        array.push(h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            style: { margin: '1px' },
            secondary: true,
            onClick: () => printOrderModelSwitch(row),
          },
          {
            default: () => '打印',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ))
      }
      if (row.deliveryStatus === 21) {
        array.push(h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            style: { margin: '1px' },
            onClick: () => confirmOrderModelSwitch(row),
          },
          {
            default: () => '接单',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ))
      }
      if (row.deliveryStatus === 211) {
        array.push(h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            style: { margin: '1px' },
            onClick: () => makingCompletedFunction(row),
          },
          {
            default: () => '制作完成',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ))
      }
      array.push(h(
        NButton,
        {
          size: 'small',
          type: 'primary',
          secondary: true,
          style: { margin: '1px' },
          onClick: () => toDeliveryOrderDetails(row),
        },
        {
          default: () => '详情',
          icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
        },
      ))
      return array
    },
  },
]
onMounted(() => {
  if (route.query.orderNum) {
    queryItems.value.orderNum = route.query.orderNum
  }
  if (route.query.deliveryOrderNum) {
    queryItems.value.deliveryOrderNum = route.query.deliveryOrderNum
  }
  $table.value?.handleSearch(queryItems)
})
const orderPrinterId = ref(null)
// 打印
function printOrderModelSwitch(row) {
  orderPrinterId.value = row.orderId
  printOrderModel.value = !printOrderModel.value
}
function printOrderModelFunction() {
  printOrderModel.value = !printOrderModel.value
}
// 接单接口
async function confirmOrderModelFunction() {
  await api.confirmDeliveryOrder({ id: currentRow.value.id })
  // 接单
  confirmOrderModelSwitch()
  $table.value?.handleSearch(queryItems)
}
// 制作完成
async function makingCompletedFunction(row) {
  await api.makingCompleted({ id: row.id })
  $table.value?.handleSearch(queryItems)
}
// 接单model
const confirmOrderModel = ref(false)
function confirmOrderModelSwitch(row) {
  currentRow.value = row
  confirmOrderModel.value = !confirmOrderModel.value
}
// 配送单详情
function toDeliveryOrderDetails(row) {
  router.push({ path: `/order/delivery-order/${row.id}`, query: { deliveryOrderNum: row.deliveryOrderNum, deliveryOrderId: row.id, orderType: 'deliveryOrder' } })
}
// -----------------------

function onPrintStart() {
  // console.log('开始打印')
}

function onPrintEnd() {
  // console.log('打印结束')
}
</script>
